<template>
    <Dialog
        :layer="confirmOption"
        @confirm="handleSubmit"
        @close="handleClose">
        <div class="comments-dialog-content">
            <h3 v-if="formOption.replyTips" class="commetns-tips">{{formOption.replyTips}}</h3>
            <el-form
                ref="modelFormRef"
                :model="data.formInline"
                :rules="data.ruleInline"
                :label-width="0">
                <el-form-item label="" prop="text">
                    <el-input
                        v-model.trim="data.formInline.text"
                        type="textarea"
                        :rows="5"
                        :maxlength="200"
                        show-word-limit
                        :placeholder="formOption.placeholder"
                        clearable/>
                </el-form-item>
            </el-form>
        </div>
    </Dialog>
</template>

<script setup>
import Dialog from '@/components/dialogComp.vue';
import { ref, reactive, defineProps, watchEffect, defineEmits } from 'vue';
import { useStore } from 'vuex';

const emit = defineEmits(['update:model-value']);

const props = defineProps({
    modelValue: {
        type: Boolean,
        default: false
    },
    modelType: { // 可以是 comments 备注 reply 回复
        type: String,
        default: 'comments'
    }
})

// 二次确认弹窗数据
let confirmOption = reactive({
    show: false,
    title: '',
    showButton: true,
    isCenter: false,
    width: '400px'
});

const store = useStore();

let modelFormRef = ref(null);

let data = reactive(
    {
        formInline: {
            text: ''
        },
        ruleInline: {
            text: [
                { required: true, message: '', trigger: 'blur' }
            ]
        }
    }
);

let formOption = reactive({
    maxlength: '200',
    placeholder: ''
});

const loading = ref(false);

function handleSubmit() {
    modelFormRef.value.validate((valid) => {
        if (valid) {
            store.dispatch('proxyAction', {
                name: 'changePassword',
                data: {
                    text: data.formInline.text
                }
            }).then((res) => {
                handleClose();
            }).catch(err => {
                // 失败
                console.log(err)
            }).finally(() => {
            });
        }
    })
}

function handleClose () {
    emit('update:model-value', false);
}

watchEffect(() => {
    confirmOption.show = props.modelValue;
    if (props.modelValue) {
            if (props.modelType === 'comments') {
                confirmOption.title = '设置备注';
                formOption.replyTips = '';
                formOption.maxlength = '200';
                formOption.placeholder = '请添加备注,限制长度为30';
                data.ruleInline.text[0].required = false;
            } else {
                confirmOption.title = '回复';
                formOption.replyTips = '感谢您的反馈...';
                formOption.maxlength = '200';
                formOption.placeholder = '请添加回复内容,限制长度为200';
                data.ruleInline.text[0].required = true;
                data.ruleInline.text[0].message = '请添加回复内容,限制长度为200';
            }
    }
});
</script>

<style lang="scss" scoped>
.comments-dialog-content {
    display: block;
}
.commetns-tips {
    margin-top: 0;
}
</style>